<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            text-align: center;
        }

        #container {
            width: 320px;
            height: auto;
            margin: 0 auto;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        #loginForm {

            width: 90%;
            margin: 0px auto;
            display: flex; /*弹性盒子*/
            flex-flow: wrap;
            justify-content: space-around;
            padding: 10px;

        }

        #loginForm div {
            margin-top: 10px;
            margin-bottom: 5px;
        }

        .label {
            width: 30%;
        }

        .controller {
            width: 70%;
        }

    </style>
</head>
<body>
<h1>用户登录</h1>
<hr>

<!--使用CDN添加jQuery类库-->
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>

<div id="container">
    <form id="loginForm">
        <div class="label">用户名:</div>
        <div class="controller"><input type="text" id="username" name="username" value=""/></div>
        <div class="label">密码:</div>
        <div class="controller"><input type="password" id="password" name="password" value=""/></div>
        <div class="label"></div>
        <div class="controller" style="text-align: start"><input style="width: 120px" id="loginBtn" type="button"
                                                                 value="登录"/></div>
    </form>
</div>

<script>


    $("#loginBtn").click(function () {
        let username = $("#username").val();
        let password = $("#password").val();

        //console.log('点你妹啊....')
        console.log("用户名：" + username + ",密码:" + password);

        $.ajax({
            url: 'users/auth?username=' + username + "&password=" + password,
            type: 'GET',
            dataType: 'json',
            success: (resp) => {
                //console.log(resp);
                if(resp.code === 200){
                    //在页面跳转之前，封装一个登录成功的用户对象。
                    let loginSuccessUser = {};
                    loginSuccessUser.username = username;
                    sessionStorage.setItem("loginSuccessUser",JSON.stringify(loginSuccessUser));
                    window.location.href = 'login_success.html'
                }else{
                    window.location.href = 'login_failure.html'
                }
            },
            error: (err) => {
                console.log(err)
            }
        })

    })
</script>
</body>
</html>